<template>
  <view class="page-container">
    <!-- 顶部搜索框 -->
    <view class="search-container">
      <view class="search-box">
        <image class="search-icon" src="/static/delete.png"></image>
        <input 
          class="search-input" 
          placeholder="搜索内容" 
          placeholder-class="placeholder-style"
          v-model="searchText"
          @confirm="onSearch"
        />
        <image v-if="searchText" class="clear-icon" src="/static/search.png" @click="clearSearch"></image>
      </view>
    </view>
    
    <!-- 内容区域 -->
<view class="section" style="padding-bottom: 100rpx;">
      <view class="section-header">
        <text class="section-title" style="text-align: center;">今日推荐</text>
      </view>
      <view class="recommend-grid">
        <view 
          class="recommend-item" 
          v-for="(item, index) in recommendList" 
          :key="index"
          @click="handleRecommendClick(item)"
        >
          <!-- 图片 -->
          <image 
            class="item-image" 
            :src="item.image" 
            mode="aspectFill"
          ></image>
          
          <!-- 内容区域 -->
          <view class="item-content">
            <text class="item-title">{{item.title}}</text>
            <view class="item-footer">
              <!-- 作者信息（添加头像） -->
              <view class="author-info">
                <image 
                  class="author-avatar" 
                  :src="item.avatar" 
                  mode="aspectFill"
                ></image>
                <text class="item-author">{{item.author}}</text>
              </view>
              
              <!-- 点赞区域 -->
              <view class="like-container" @click.stop="toggleLike(item)">
                <image 
                  class="like-icon" 
                  :src="item.liked ? '/static/liked.png' : '/static/like.png'"
                ></image>
                <text class="like-count">{{formatLikeCount(item.likeCount)}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item" @click="switchTab('home')">
        <image class="tab-icon" :src="currentTab === 'home' ? '/static/home-active.png' : '/static/home.png'"></image>
        <text :class="currentTab === 'home' ? 'tab-text-active' : 'tab-text'">首页</text>
      </view>
	  <view class="tab-item" @click="switchTab('AIchat')">
	    <image class="tab-icon" :src="currentTab === 'AI' ? '/static/AI-active.png' : '/static/AI.png'"></image>
	    <text :class="currentTab === 'AI' ? 'tab-text-active' : 'tab-text'">AI解答</text>
	  </view>
      <view class="tab-item" @click="switchTab('mine')">
        <image class="tab-icon" :src="currentTab === 'mine' ? '/static/mine-active.png' : '/static/mine.png'"></image>
        <text :class="currentTab === 'mine' ? 'tab-text-active' : 'tab-text'">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js'
import axios from "axios"
export default {
  data() {
    return {
      searchText: '', // 搜索文本
      imgurl: '',
      currentTab: 'home',
   recommendList: [
           {
             id: 1,
             image: '/static/shouye1.png',
             title: '上班试试不一样的风格，',
             author: '柴分甜',
             avatar: '/static/shouye1.png',
             likeCount: 1560,
             liked: false
           },
           {
             id: 2,
             image: '/static/shouye1.png',
             title: '这感觉……只有女生才',
             author: '七七早安Iris',
             avatar: '/static/shouye1.png',
             likeCount: 48000,
             liked: true
           },
           {
             id: 3,
             image: '/static/shouye1.png',
             title: '打卡公基常识了！！！',
             author: '公基常识',
             avatar: '/static/shouye1.png',
             likeCount: 118,
             liked: false
           },
           {
             id: 4,
             image: '/static/shouye1.png',
             title: '郵都的正确读音？',
             author: '胖兔兔',
             avatar: '/static/avatar4.jpg',
             likeCount: 427,
             liked: false
           },
		   {
		     id: 5,
		     image: '/static/shouye1.png',
		     title: '郵都的正确读音？',
		     author: '胖兔兔',
		     avatar: '/static/avatar4.jpg',
		     likeCount: 427,
		     liked: false
		   },
		   {
		     id: 6,
		     image: '/static/shouye1.png',
		     title: '郵都的正确读音？',
		     author: '胖兔兔',
		     avatar: '/static/avatar4.jpg',
		     likeCount: 427,
		     liked: false
		   }
         ]
    }
  },
  computed: {
    // 过滤文章列表
    filteredArticles() {
      if (!this.searchText) return this.articles;
      const search = this.searchText.toLowerCase();
      return this.articles.filter(article => 
        article.title.toLowerCase().includes(search) || 
        article.author.toLowerCase().includes(search) ||
        article.content.toLowerCase().includes(search)
      );
    }
  },
  onLoad() {
  	// this.selall()
  },
  methods: {
    // 搜索确认
    onSearch() {
      console.log('搜索内容:', this.searchText);
      // 这里可以添加搜索逻辑，如请求接口等
      // 已经通过computed属性实现了本地搜索
    },
    selall(){
		uni.request({
			url:'http://127.0.0.1:8086/search/selall',
			method:'GET',
			success: (res) => {
				console.log(res.data);
			}
		})
	},
	dianzannote(){
		uni.request({
			url:"http://127.0.0.1:8086/like/addonelikenote",
			method:'GET',
			data:{
				userid:1,
				likedid:1
			},
			success: (res) => {
				console.log(res.data);
			}
		})
	},
    // 清空搜索
    clearSearch() {
      this.searchText = '';
    },
    
    // 切换tab
    switchTab(tab) {
      this.currentTab = tab;
      if (tab === 'home') {
       
      } else if (tab === 'mine') {
        uni.navigateTo({
          url: '/pages/shequMy/shequMy'
        });
      }
	  else if (tab === 'AIchat') {
	    uni.navigateTo({
	      url: '/pages/AIchat/AIchat'
	    });
	  }
    },
     handleRecommendClick(item) {
        uni.navigateTo({
        	url:'/pages/comment/comment'
        })
        },
		 toggleLike(item) {
		      item.liked = !item.liked
		      if (item.liked) {
		        item.likeCount++
				this.dianzannote()
		      } else {
		        item.likeCount--
		      }
		    },
		    formatLikeCount(count) {
		      if (count >= 10000) {
		        return (count / 10000).toFixed(1) + '万'
		      }
		      return count
		    },
    addaa() {
      uni.chooseFile({
        success(res) {
          const tempFilePaths = res.tempFiles;	
          this.imgurl = tempFilePaths[0]
          let formdata = new FormData();
          formdata.append('file', this.imgurl);
          formdata.append('userid', 4488);
          formdata.append('noteid', 1000);
          console.log(formdata.get("file"))
          axios({
            method: 'post',
            url: 'http://localhost:8085/oss/file/upload1',
            headers: {
              'content-type': 'mulitpart/form-data'
            },
            data: formdata
          }).then(res => {
            console.log(res.data)
          }).catch(error => {
            console.error(error)
          })
        }
      })
    },
    
    choseimg() {
      uni.chooseImage({
        count: 6,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: (res) => {
          console.log(JSON.stringify(res.tempFilePaths[0]))
          this.img = res.tempFilePaths[0]
        }
      })
    }
  }
}
</script>

<style>
   @import url(shequ.css);
</style>